<template>
	<view class="content">
		<view class="input-box u-flex">
			<text class="tips">消费金额</text>
			<view class="sign">￥</view>
			<view class="money-box">
				<text>{{ money }}</text>
			</view>
			<view class="cursor"></view>
		</view>
		<s-keyboard @confirm="submit" ref="keyboard"></s-keyboard>
		<view class="hitokoto-box">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: ''
			}
		},
		onLoad() {

		},
		onShow() {

		},
		components: {

		},
		methods: {
			submit() {
				// return
				if (!this.money) {
					this.$wanlshop.msg('请先输入买单金额')
					return false
				}
				this.$refs.keyboard.showPayText()
				this.$u.api.createOrder({
					total: this.money
				}).then(res => {
					console.log(res)
					this.$jwx.wxpay({
						data: res.data,
						success: res => {
							this.$refs.miToast.show({
								title: '支付成功',
								type: 'success'
							})
							this.$u.vuex('money', '')
							this.$refs.keyboard.resetConfirmText()
						},
						fail: err => {
							console.log(err)
							this.$refs.miToast.show({
								title: '取消支付',
								type: 'warning'
							})
							this.$refs.keyboard.resetConfirmText()
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.content {
		font-size: 28rpx;

		.btn {
			margin-top: 60rpx;
			padding: 0 60rpx;
		}
	}


	.input-box {
		position: fixed;
		top: 100rpx;
		left: 50%;
		width: 700rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		padding: 0 40rpx 0 30rpx;
		background-color: #ffffff;
		height: 120rpx;
		border-radius: 12rpx;
		box-sizing: border-box;

		.tips {
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
		}

		.sign {
			margin-left: auto;
			font-size: 36rpx;
			font-weight: bold;
			transform: translateY(8rpx);
		}

		.money-box {
			color: #333;
			font-size: 56rpx;
			font-weight: bold;
		}

		.cursor {
			position: absolute;
			right: 30rpx;
			width: 4rpx;
			height: 58rpx;
			background-color: #768afa;
			animation: flicker 1.2s infinite;

			@keyframes flicker {

				0%,
				100% {
					opacity: 0;
				}

				50% {
					opacity: 1;
				}
			}
		}
	}

	::v-deep .keyboard .list .key {
		box-sizing: border-box;
	}
</style>